<!-- 成型日计划 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <Table
          :summaryData="summaryData"
          summary
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
          :TableHeight="50"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" class="mt10">
      <h1 class="f16">成型计划延误累计明细</h1>
      <Table :TableHeight="50" :tableHeader="tableHeader2" :tableData="tableData2" :isLoading="isLoading2" @currentRow="currentRow2" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
import { watch } from 'vue'
import { debounce } from 'lodash'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
import { tabsEmits } from 'element-plus'
export default {
  name: 'MoldingDayPlan'
}
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const getCurrentTime = () => {
  const date = new Date()
  const year = String(date.getFullYear())
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const dayOfMonth = String(date.getDate()).padStart(2, '0')

  return `${year}-${month}-${dayOfMonth}`
}
const formList = ref([
  {
    type: 'dateSingle',
    dateLabel: '计划日期',
    placeholder: getCurrentTime(),
    dateValue: getCurrentTime()
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出'
  // }
])

// 表一模块
// 表一按钮
const imgList = ref([])
const findClicked = (content: string) => {
  if (content === '查询') {
    getTableList()
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableHeader = ref([
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '订单号',
    prop: 'orderId'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoName',
    srcList: imgList
  },
  {
    label: '鞋名',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '当日完成量',
    prop: 'dayProd'
  },
  {
    label: '配套状态',
    prop: 'okFlag'
  },
  {
    label: '配套完成日期',
    prop: 'okDate'
  },
  {
    label: '鞋面欠数',
    prop: 'JZeYang'
  },
  {
    label: '大底欠数',
    prop: 'soleShort'
  }
])
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | string
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: '0%'
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

// 获取表数据
const imgList2 = ref([])
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(
    `/statements/getDayPlan?day=${
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '计划日期')
        ?.dateValue
    }&choose=${7}`
  )
  isLoading.value = false
  currentRow()

  tableData.value = tableDataList.list

  isLoading2.value = false
  imgList2.value = tableDataList.delayList.map((item: any) => {
    return item.photoName
  })
  tableData2.value = tableDataList.delayList.map((item: any) => {
    return {
      ...item,
      missingCount: Number(item.orderQty) - Number(item.totalProd)
    }
  })
  currentRow2()
}, 500)
onMounted(() => {
  getTableList()
})

// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}
const tableHeader2 = ref([
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '订单号',
    prop: 'orderId'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '样品类型',
    prop: 'sampleType'
  },
  {
    type: 'img',
    label: '图片',
    prop: 'photoName',
    srcList: imgList2
  },
  {
    label: '鞋名',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '客户交期',
    prop: 'deliveryDate'
  },
  {
    label: '计划日期',
    prop: 'planDate'
  },
  {
    label: '完成数量',
    prop: 'totalProd'
  },
  {
    label: '欠数',
    prop: 'missingCount'
  }
])
const tableData2 = ref([])
const isLoading2 = ref(true)
const currentTableRow2 = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0]) => {
  currentTableRow2.value = row
}
</script>
